<template>
	<view class="hb-panel" :class="[fullScreen?'full-screen':'',smBorder?'sm-border':'']">
		<view class="hb-bar" v-if=" title || status || avatar">
			<view class="action">
				<view v-if="avatar" class="hb-avatar" :class="[avatarRound?'round':'']" :style="{backgroundImage:'url('+avatarSrc+')'}"></view>{{title}}
			</view>
			<view class="action hb-panel__header-value">{{status}}</view>
		</view>
		<slot v-else name="header" />
		<view class="hb-panel__content bg-white padding-sm">
			<slot></slot>
		</view>
		<view v-if="useFooterSlot" class="hb-panel__footer">
			<slot name="footer"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'hbPanel',
		props: {
			desc: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: ''
			},
			status: {
				type: String,
				default: ''
			},
			//是否显示底部操作条
			useFooterSlot: Boolean,
			//顶部是否显示头像
			avatar: Boolean,
			//头像路径
			avatarSrc: {
				type: String,
				default: ""
			},
			//头像是否圆形
			avatarRound: Boolean,
			//是否满屏
			fullScreen: Boolean,
			smBorder: Boolean
		}
	}
</script>
